<template>
    <view class="page">
        <view class="content">
            <view class="_titme">
                <view class="titmetow" @click="openStartTime">{{startTime}}</view>
                    -
                <view class="titmetow" @click="openEndTime">{{endTime}}</view>
            </view>
            <u-datetime-picker :show="startTimeShow" v-model="form.start" mode="date" @confirm="confirmStartTime" @cancel="cancelStartTime"></u-datetime-picker>
            <u-datetime-picker :show="endTimeShow" v-model="form.end" mode="date" @confirm="confirmEndTime" @cancel="cancelEndTime"></u-datetime-picker>

            <u-sticky bgColor="#fff">
                <u-tabs :list="list" :current="current" @change="sectionChange"></u-tabs>
            </u-sticky>
            <report-list :reportList="reportList" :type="current" @confirm="refreshList"></report-list>
        </view>
    </view>
</template>

<script>
    import ReportList from './components/ReportList';
    export default {
        name: "report",
        components:{
            ReportList
        },
        data() {
            return {
                startTimeShow: false,
                endTimeShow: false,
                startTime: '开始时间',
                endTime: '结束时间',
                list: [{
                    name: '应收房租',
                    type: 1
                }, {
                    name: '已收房租',
                    type: 2
                }, {
                    name: '应支房租',
                    type: 3
                }, {
                    name: '已支房租',
                    type: 4
                }],
                current: 0,
                form:{
                    start: Number(new Date()),
                    end: Number(new Date()),
                },
                update: true,
                page: {
                    count: 1,
                    size: 10,
                    current: 1,
                },
                reportList:[]
            }
        },
        onLoad(){
            uni.showLoading({title: '正在加载'});
            this.getReportList();
        },
        onReachBottom() {
            // 页面滚动到底
            if (this.page.count > this.page.current) {
                uni.showLoading({title: '正在加载'});
                this.page.current++;
                let params = {
                    u_id: uni.getStorageSync('u_id'),
                };
                switch (this.current) {
                    case 0:
                        params.type = 1;
                        break;
                    case 1:
                        params.pay_status = 0;
                        break;
                    case 2:
                        params.type = 2;
                        break;
                    case 3:
                        params.pay_status = 1;
                        break;
                }
                params.p = this.page.current;
                uni.$u.http.get('/api.php/house/get_bill_list', {params: params}).then(res => {
                    uni.hideLoading();
                    this.page.current = res.current_page;
                    this.page.size = res.per_page;
                    this.page.count = res.total;

                    for (let i = 0; i < res.data.length; i++) {
                        this.reportList.push(res.data[i]);
                    }
                });
            }
        },
        methods: {
            sectionChange(index) {
                uni.showLoading({title: '正在加载'});
                this.current = index.index;

                this.getReportList();
            },

            openStartTime(){
                this.startTimeShow = true;
                uni.hideKeyboard();
            },
            cancelStartTime(){
                this.startTimeShow = false;
            },
            confirmStartTime(e){
                this.startTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');

                this.cancelStartTime();
            },

            openEndTime(){
                this.endTimeShow = true;
                uni.hideKeyboard();
            },
            cancelEndTime(){
                this.endTimeShow = false;
            },
            confirmEndTime(e){
                this.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
                this.cancelEndTime();

                console.log(this.startTime);
                console.log(this.endTime);

                // todo post
                // uni.showLoading({title: '正在加载'});
                // uni.$u.http.post('/api.php/house/real_house_all', {type:e.type}).then(res => {
                //     uni.hideLoading();
                //     // 更新 list
                //
                //     // 刷新组件
                //     this.reload();
                // });


            },

            reload() {
                // 移除组件
                this.update = false;
                // 在组件移除后，重新渲染组件
                // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
                this.$nextTick(() => {
                    this.update = true
                })
            },

            getReportList(){
                let params = {
                    u_id: uni.getStorageSync('u_id'),
                };
                switch (this.current) {
                    case 0:
                        params.type = 1;
                        break;
                    case 1:
                        params.pay_status = 0;
                        break;
                    case 2:
                        params.type = 2;
                        break;
                    case 3:
                        params.pay_status = 1;
                        break;
                }
                params.p = this.page.current;

                uni.$u.http.get('/api.php/house/get_bill_list', {params: params}).then(res => {
                    uni.hideLoading();
                    this.page.current = res.current_page;
                    this.page.size = res.per_page;
                    this.page.count = res.total;

                    this.reportList = res.data;
                });
            },

            refreshList(){
                this.getReportList();
            },
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: RGBA(245, 245, 245, 1);
    }
    .content{
        padding: 20rpx;
    }

    ._titme {
        @include flex(row);
        align-content: space-around;

        .titmetow {
            width: 300rpx;
            height: 60rpx;
            background-color: #3c9cff;
            text-align: center;
            margin: 0 auto;
            border-radius: 15px;
            padding-top: 5rpx;
            font-size: 14px;
            font-weight: 500;
            color: #ffffff;
            line-height: 60rpx;
        }
    }
</style>